<template>
  <!-- 表格 -->
  <my-table
    :tableData="showTableData"
    :propList="propList"
    v-model:pagination="pagination"
    :tableLoading="tableLoading"
    @updateTableData="refreshTable"
  >
    <template #roles="{ row }">
      <el-select
        v-model="row.roles"
        :disabled="row.disabled"
        placeholder="请选择"
        @change="roleChange(row._id, row.roles)"
      >
        <el-option
          v-for="item in options.introOption"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </template>
    <template #action="{ row }">
      <el-button type="primary" @click="row.disabled = !row.disabled">
        {{ row.disabled ? '设置角色' : '取消设置' }}
      </el-button>
    </template>
    <template #search>
      <el-form ref="refSearchForm" :model="searchForm" :inline="true" label-width="120px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model.trim="searchForm.username" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model.trim="searchForm.email" />
        </el-form-item>
        <el-form-item label="角色" prop="roles">
          <el-select v-model="searchForm.roles" clearable placeholder="请选择" style="width: 140px">
            <el-option
              v-for="item in options.introOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="search-btns">
        <el-button type="primary" @click="onSubmit">搜索</el-button>
        <el-button @click="onCancel">取消</el-button>
      </div>
    </template>
  </my-table>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import useTable from '@/hooks/useTable'
import { getUserList, changeRole } from '@/api/user'
import options from '@/constants/index'
defineOptions({ name: 'BannerIndex' })
// 定义表格属性
const propList = ref([
  { prop: 'username', label: '用户名' },
  { prop: 'email', label: '邮箱' },
  { label: '角色', slotName: 'roles' },
  { prop: 'updatedAt', label: '更新日期' },
  { label: '操作', slotName: 'action', width: '180' }
])
// 搜索
const refSearchForm = ref(null)
const searchForm = ref({
  username: '',
  email: '',
  roles: ''
})
const onSubmit = function () {
  refreshTable()
}
const onCancel = function () {
  searchForm.value = {
    username: '',
    email: '',
    roles: ''
  }
  refreshTable()
}
// 获取表格列表
const { tableData, tableLoading, pagination, refreshTable } = useTable(getUserList, searchForm)
const showTableData = computed(() => {
  return tableData.value.map((item) => ({ ...item, disabled: true }))
})
// 角色切换
const roleChange = async function (id, roles) {
  if (roles === '') {
    ElMessage({
      type: 'error',
      message: '角色不能为空!'
    })
    return
  }
  try {
    await changeRole({ id, roles })
    ElMessage({
      type: 'success',
      message: '角色更新成功'
    })
    refreshTable()
  } catch (error) {
    console.log('error: ', error)
  }
}
</script>

<style lang="scss" scoped>
.search-btns {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
</style>
